<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js"
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass.js"
import {OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass.js"
export default {
  name: "breath-light",
  data() {
    return {
      scene:null,
      camera:null,
      composer:null,
      renderer:null,
      container:null,
      controls:null,
    }
  },
  methods:{
    initScene(){
      this.scene = new THREE.Scene();
      const axesHelper = new THREE.AxesHelper( 100 );
      axesHelper.position.set(0,0,0)
      this.scene.add( axesHelper );
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0)
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(300,300,600)
      this.scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      this.scene.add(directionalLight2);
    },
    initCube() {
      const geometry = new THREE.BoxGeometry(20, 20, 20);
      const material = new THREE.MeshBasicMaterial({
        color: '#FF0000',
      });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
      this.camera.position.z = 5;
    },
    //给正方体添加描边效果
    initOutlinePass() {
      let renderScene = new RenderPass(this.scene, this.camera);
      let outlinePass = new OutlinePass(
          new THREE.Vector2(window.innerWidth, window.innerHeight),
          this.scene,
          this.camera,
          [this.cube]
      );
      // 将此通道结果渲染到屏幕
      outlinePass.renderToScreen = true
      outlinePass.edgeGlow = 1 // 发光强度
      outlinePass.usePatternTexture = false // 是否使用纹理图案
      outlinePass.edgeThickness = 10 // 边缘浓度
      outlinePass.edgeStrength = 10 // 边缘的强度，值越高边框范围越大
      outlinePass.pulsePeriod = 2// 闪烁频率，值越大频率越低
      outlinePass.visibleEdgeColor.set('#ffff00') // 呼吸显示的颜色
      outlinePass.hiddenEdgeColor.set('#ff0000') // 不可见边缘的颜色
      // 将通道加入组合器
      this.composer = new EffectComposer(this.renderer);
      this.composer.addPass(renderScene);
      this.composer.addPass(outlinePass);
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#CCCCCC', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.dampingFactor = 0.5;
      // 视角最小距离
      this.controls.minDistance = 100;
      // 视角最远距离
      this.controls.maxDistance = 1000;
      // 最大角度
      this.controls.maxPolarAngle = Math.PI / 2.2;
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0)
    },
    initAnimate() {
      this.composer.render();
      requestAnimationFrame(this.initAnimate);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initRenderer();
      this.initCube();
      this.initOutlinePass();
      this.initControl();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
    window.addEventListener( 'click', this.selectedModel);
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}
</style>
